<template>
    <div>
        <div class="pic">
            <span class="iconfont icon-arrow-left-bold" @click="$router.go(-1)">歌手</span>
            <img :src="playlist.artist.img1v1Url" alt="">
            <div class="title">
                {{playlist.artist.name}}
            </div>
            <span class="brief"><h3>简介:</h3><p>{{playlist.artist.briefDesc}}</p></span>
        </div>
        <div class="musiclist">
            <dl>
                <dd v-for="(item,index) in playlist.hotSongs" :key = "index" @click="playmusic(item.id,item.name,item.ar,item.al.picUrl)">
                    <h1>{{index+1}}</h1>
                    <div class="info">
                        <h2>{{item.name}}</h2>
                        <h3>
                            <span v-for="(key,i) in item.ar" :key="i">{{item.ar.length>1 ? key.name +"&nbsp;&nbsp;/&nbsp;&nbsp;" :key.name}}</span>
                        </h3>
                        <div class="musicPlay">
                            <span class="iconfont icon-bofang "></span>
                        </div>
                    </div>
                </dd>
            </dl>
        </div>
    </div>
</template>
<script>
import {getArtist} from '../../api/sing'
    export default {
        data() {
            return {
                playlist:{
                    artist:{
                        img1v1Url:""
                    }
                }
            }
        },
        methods: {
            getArtistFun(){
                let id = this.$route.query.id;
                getArtist({id:id}).then(data=>{
                    console.log(data);
                    if(id){
                        this.playlist = data
                    }else{
                        return;
                    }
                })
            },
        playmusic(id,name,ar,coverImgUrl){
            let playMusicData = {
                coverImgUrl,
                id,
                name,
                ar,
                tracks:this.playlist.hotSongs
            }
            // 数据存储
            this.$store.commit("musicDataFun",playMusicData);
            let musiclistts = JSON.parse(JSON.stringify(playMusicData));
            this.$store.commit("musiclisttsFun",musiclistts)
        }
        },
        created() {
            this.getArtistFun();
        },
    }
</script>

<style lang="less" scoped>
    .pic{
        width: 640px;
        height: 400px;
        // background-color: rosybrown;
        position: relative;
        .iconfont{
            position: absolute;
            font-size: 30px ;
            text-indent: 1em;
            margin-top: 20px;
            color: #ccc;
            z-index: 9999;
            cursor: pointer;
        }
        img{
            width: 100%;
            // height: 100%;
            filter: blur(1px);
        }
        .title{
            position: absolute;
            left:32px;
            top: 70px;
            font-size: 32px;
            font-weight: bold;
            color:#333;
            height: 38px;
            overflow: hidden;
        }
        .brief{
            position: absolute;
            top: 120px;
            left: 32px;
            font-size: 15px;
            width: 200px;
            // height: 200px;
            p{
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp:10;
                -webkit-box-orient:vertical; 
                color: #131615;               
            }
            h3{
                color: #ccc;
                display: inline-block;
            }
        } 
        
    }
    .musiclist{
        border-radius: 12px;
        background-color: #fff;
        position: relative;
        top: -12px;
        min-height: 200px;
        dt{
            height: 61px;
            line-height: 61px;
            border-bottom: 1px solid #e2e2e2;
            font-size: 25px;
            color: #131615;
            text-indent: 1.5em;
        }
        dd{
            border-bottom: 1px solid #e2e2e2;
            display: flex;
            position: relative;
            cursor: pointer;
            h1{
                flex: 0 0 78px;
                line-height: 91px;
                text-align: center;
                font-size: 28px;
                color: #707271;
                font-weight: normal;
            }
            .info{
                flex: 1;
                height: 100%;
                // position: relative;
                h2{
                    display: inline-block;
                    font-size: 25px;
                    color: #3a3c3c;
                    margin-top:18px ;
                    font-weight: normal;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    width: 400px;
                }
                h3{
                    display: inline-block;
                    font-size: 20px;
                    margin-top: 10px;
                    color: #777978;
                    font-weight: normal;
                    position: absolute;
                    left: 78px;
                    bottom: 10px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    width: 400px;
                }
                .musicPlay{
                    // display: inline-block;
                    position: relative;
                    right: 50px;
                    bottom: -15px;
                    float: right;
                    span{
                       font-size: 50px; 
                    }
                    
                }
            }
        }
    }
</style>